<!--
 * @copyright: Huang Ding
 * @Author: ding-cx
 * @Date: 2021-03-06 10:21:53
 * @LastEditors: ding-cx
 * @LastEditTime: 2021-04-06 14:24:54
 * @Description: file content
-->
<template>
  <div>
    <el-input v-model="sendmsg" placeholder="发送信息"></el-input>
    <el-input v-model="room" placeholder="房间"></el-input>
    <el-input v-model="selfwsuid" placeholder="wsuid"></el-input>
    <el-input v-model="myevent" placeholder="event"></el-input>
    <el-button type="primary" @click="connect">连接</el-button>
    <el-button type="primary" @click="testSendMsg">发送</el-button>
    <div>{{ getMsg }}</div>

    <input ref="file" type="file" name="file" id="" />
    <el-button type="primary" @click="fileBtn">文件</el-button>
  </div>
</template>

<script>
// import io from "socket.io-client";
import WebSocket from "@/utils/WebSocket";

export default {
  name: "sys-websocket",
  data() {
    return {
      sendmsg: "",
      getMsg: "",
      room: "test",
      ws: null,
      wsuid: this.createWsuid(),
      selfwsuid: "12",
      myevent: "abcdef",
    };
  },
  methods: {
    createWsuid() {
      const a = Math.random().toString(36).replace(".", "");
      const b = Math.random().toString(36).replace(".", "");
      return a + b;
    },
    testSendMsg() {
      console.log("send.");

      // console.log(Math.random().toString(36));
      // this.ws.send(this.sendmsg);
      // 发送和响应
      this.ws.emit("abc", { msg: this.sendmsg });
    },
    InitWs() {
      const log = console.log;
      // init
      const io = () => {};
      const socket = io("ws://127.0.0.1:7001", {
        // 实际使用中可以在这里传递参数
        query: {
          room: "demo",
          userId: `client_${Math.random()}`,
        },

        transports: ["websocket"],
      });

      socket.on("connect", () => {
        const id = socket.id;

        log("#connect,", id, socket);
      });

      // 系统事件
      socket.on("disconnect", (msg) => {
        log("#disconnect", msg);
      });

      socket.on("disconnecting", () => {
        log("#disconnecting");
      });

      socket.on("error", () => {
        log("#error");
      });

      socket.on("res", (msg) => {
        log("res");
        console.log(msg);
      });
      return socket;
    },
    // 使用原生webSocket
    useWs() {
      const ws = new WebSocket(`ws://localhost:7002/${this.room}`, {
        wsuid: this.selfwsuid,
      });
      console.log(ws.wsuid);
      ws.on("open", (msg) => {
        this.ws.emit("user-list");
        console.log("open", msg);
      });
      ws.on("close", (msg) => {
        console.log("close", msg);
      });
      ws.on("error", (msg) => {
        console.log("error", msg);
      });
      // 后台推送文件过来。但不知格式。
      ws.on("get-file", (fileBlob) => {
        console.log(fileBlob);
        // console.log(fileBlob.type);
        const archor = document.createElement("a");
        const href = window.URL.createObjectURL(fileBlob); //关键点3
        archor.setAttribute("href", href);
        archor.setAttribute("download", "文件啊"); //关键点4
        // archor.click();//下载后台推来的文件
      });
      return ws;
    },
    connect() {
      this.ws = this.useWs();
      this.ws.on(this.myevent, (res) => {
        console.log(res);
      });
      const cb = (res) => {
        console.log("abc event", res);
      };
      this.ws.on("abc", cb);

      this.ws.on("user-list", (data) => {
        console.log("user-list", data);
      });
    },
    fileBtn() {
      // console.log(this.$refs.file.files);
      // console.log(file);
      // this.$refs.file
      // once只触发一次响应。这就是http的经典请求响应模型。
      this.ws.sendFile(this.$refs.file.files[0]);
      this.ws.once("send-file", (data) => {
        console.log(data);
      });
    },
  },
  created() {},
};
</script>

<style>
</style>